<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>运动</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration:none;
        }
        input{
            outline:0;
            outline-style:0;
        }
        img{
            border:0;
        }
        #box{
            background:red;
            width:100px;
            height:100px;
            position:absolute;
            left:0;
            top:220px;
        }
    </style>
</head>
<body>
<button id="btn">走你</button>
<div id="box">

</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
     $('#btn').on('click',function(){
        var speed=4;
        setInterval(function(){
            $('#box').animate({
            "left": $('#box').position().left+10+'px',
            },
            speed, function() {
            /* stuff to do after animation is complete */
        });
        }, 1000)
     })
</script>
</html>